﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/datapattern.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>
        $(function () {
            $('#divAdd').css('display', 'none');
            $("#divEdit").css("display", "none");
            //加载数据
            loadData();
        })

        //分页加载数据
        function loadData() {
            $('#tt').datagrid({
                url: '/UserInfo/GetUserInfo',
                title: '用户数据表格',
                width: 700,
                height: 400,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'ID',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 5,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 15],
                queryParams: {},//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
					{ field: 'ID', title: '编号', width: 80 },
					{ field: 'UserName', title: '姓名', width: 120 },
                     { field: 'UserPass', title: '密码', width: 120 },
                      { field: 'Remark', title: '备注', width: 120 },
					{
					    field: 'RegTime', title: '时间', width: 80, align: 'right',
					    formatter: function (value, row, index) {
					        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
					    }
					}
                ]],
                toolbar: [{
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteInfo();
                    }
                }, {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        addInfo();
                    }
                }, {
                    id: 'btnEdit',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        editInfo();
                    }
                }, {
                    id: 'btnSetUserRole',
                    text: '为用户分配角色',
                    iconCls: 'icon-edit',
                    handler: function () {
                        setUserRoleInfo();
                    }
                },{
                    id: 'btnSetUserAction',
                    text: '为特殊用户分配权限',
                    iconCls: 'icon-edit',
                    handler: function () {
                        setUserActionInfo();
                    }
                }]
            });
        }


        //为特殊用户分配权限-渲染数据模板
        function setUserActionInfo() {
            var rows = $('#tt').datagrid('getSelections');
            if (rows.length != 1) {
                $.messager.alert("提醒", "分配权限只能选择一人!", "error");
                return;
            }
            $("#setActionFrame").attr("src", "/UserInfo/SetUserActionInfo/?userId=" + rows[0].ID);
            $("#setActionDiv").css("display", "block");
            $('#setActionDiv').dialog({
                title: "添加信息",
                collapsible: true,
                width: 600,
                height: 400,
                modal: true,
                resizable: true,
                buttons: [{
                    text: 'Ok',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        $('#setActionDiv').dialog('close');
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#setActionDiv').dialog('close');
                    }
                }]
            });
        }





        //为用户分配角色
        function setUserRoleInfo() {
            var rows = $('#tt').datagrid('getSelections');
            if (rows.length != 1) {
                $.messager.alert("提醒", "必须一次只能选一个!", "error");
                return;
            }
            $("#setRoleFrame").attr("src", "/UserInfo/SetUserRoleInfo/?id=" + rows[0].ID);
            $("#setRoleDiv").css("display", "block");
            $('#setRoleDiv').dialog({
                title: "为用户分配角色信息",
                collapsible: true,
                width: 300,
                height: 400,
                modal: true,
                resizable: true,
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        var childWindow = $("#setRoleFrame")[0].contentWindow;//获取子窗体的window对象.
                        childWindow.subForm();//调用子窗体中的subForm方法.
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#setRoleDiv').dialog('close');
                    }
                }]
            });
        }
        //关闭分配角色的窗口
        function afterSetUserRole() {
            $('#setRoleDiv').dialog('close');
        }


        //添加数据，显示添加窗口
        function addInfo() {
            $("#divAdd").css("display", "block");
            $('#divAdd').dialog({
                title: "添加信息",
                collapsible: true,
                width: 300,
                height: 200,
                modal: true,
                resizable: true,
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        $("#addForm").submit();
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#divAdd').dialog('close');
                    }
                }]
            });

        }
        //单机添加按钮之后 执行添加操作
        function afterAdd(data) {
            if (data == 'ok') {
                //关闭添加窗口
                $('#divAdd').dialog('close');
                //清空表单中的数据
                $('#addForm input').val('');
                loadData();
            }
        }

        //删除操作
        function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');
            //如果没有选中要删除的记录
            if (rows.length == 0 || !rows) {
                $.messager.alert('提醒', '请选择要删除的记录!', 'error');
                return;
            }
            $.messager.confirm('提示', '确定要删除么?', function (r) {
                //r代表了用户点击的操作，TRUE代表了确定，FALSE代表了取消
                if (r) {
                    var strId = '';
                    //将所选中的Id全部都拼接成一个string
                    for (var i = 0; i < rows.length; i++) {
                        strId += rows[i].ID + ',';
                    }
                    strId = strId.substr(0, strId.length - 1);
                    $.post('/UserInfo/DeleteUserInfo', { "strId": strId }, function (data) {
                        if (data=="ok") {
                            $('#tt').datagrid('clearSelections');
                            $('#tt').datagrid('reload');
                            $.messager.show({
                                title: '提示',
                                msg: '删除成功',
                                showType: 'show'
                            });
                        }
                        else {
                            $.messager.alert("提示", "删除失败", "error");
                        }
                    })
                }
            });


        }

        //单击修改操作，渲染修改模块
        function editInfo() {
            //判断用户选择是否符合规则
            var rows = $('#tt').datagrid('getSelections');
            if (rows.length != 1) {
                $.messager.alert("提醒", "请选择一条数据，不能多选也不能不选!", "error");
                return;
            }
            //发送异步请求，得到要修改的数据，赋值到修改模块中
            $.post("/UserInfo/GetUserInfoModel", { "id": rows[0].ID }, function (data) {
                $("#txtUName").val(data.UName);
                $("#txtUPwd").val(data.UPwd);
                $("#txtRemark").val(data.Remark);
                $("#txtSort").val(data.Sort);
                $("#txtID").val(data.ID);
                $("#txtSubTime").val(ChangeDateFormat(data.SubTime));
            });
            //显示出修改数据的版块
            $("#divEdit").css("display", "block");
            $('#divEdit').dialog({
                title: "修改信息",
                collapsible: true,
                width: 300,
                height: 400,
                modal: true,
                resizable: true,
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单
                        $("#editForm").submit();
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#divEdit').dialog('close');
                    }
                }]
            });
        }

        //提交修改表单之后的操作
        function afterEdit(data) {
            if (data == "ok") {
                $('#divEdit').dialog('close');
                $('#tt').datagrid('clearSelections');
                $('#tt').datagrid('reload');
                $.messager.show({
                    title: '提示',
                    msg: '修改成功',
                    showType: 'show'
                });
            } else {
                $.messager.alert("提醒", "修改失败!", "error");
            }
        }

        //将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    </script>
</head>
<body>
    <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>

    <!-------------------------------------------------------------添加数据开始-------------------------------------------------------------------->
    <div id="divAdd">
        @using (Ajax.BeginForm("AddUserInfo", "UserInfo", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
        {
            <table>
                <tr><td>用户名</td><td><input type="text" name="UName" /></td></tr>
                <tr><td>密码</td><td><input type="text" name="UPwd" /></td></tr>
                <tr><td>备注</td><td><input type="text" name="Remark" /></td></tr>
                <tr><td>排序</td><td><input type="text" name="Sort" /></td></tr>
            </table>
        }
    </div>
    <!-------------------------------------------------------------添加数据结束-------------------------------------------------------------------->
    <!-------------------------------------------------------------修改数据开始-------------------------------------------------------------------->
    <div id="divEdit">
        @using (Ajax.BeginForm("EditUserInfo", "UserInfo", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
        {
            <input type="hidden" name="SubTime" id="txtSubTime" />
            <input type="hidden" name="ID" id="txtID" />
            <table>
                <tr><td>用户名</td><td><input type="text" name="UName" id="txtUName" /></td></tr>
                <tr><td>密码</td><td><input type="text" name="UPwd" id="txtUPwd" /></td></tr>
                <tr><td>备注</td><td><input type="text" name="Remark" id="txtRemark" /></td></tr>
                <tr><td>排序</td><td><input type="text" name="Sort" id="txtSort" /></td></tr>
            </table>
        }
    </div>
    <!-------------------------------------------------------------修改数据开始-------------------------------------------------------------------->

    <!-------------------------------------------------------------分配角色信息开始-------------------------------------------------------------------->
    <div id="setRoleDiv">
        <iframe id="setRoleFrame" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
    </div>
    <!-------------------------------------------------------------分配角色信息开始-------------------------------------------------------------------->

    <!-------------------------------------------------------------分配权限信息开始-------------------------------------------------------------------->
    <div id="setActionDiv" style="overflow:hidden">
        <iframe id="setActionFrame" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
    </div>

    <!-------------------------------------------------------------分配权限信息结束-------------------------------------------------------------------->



</body>
</html>
